<template>
  <div class="transfer-demo">
    <h3 class="title">基本</h3>
    <div>
      <p>值：{{ value1 }}</p>
      <d-transfer v-model="value1" :datas="sourceDatas1" :option="option1"></d-transfer>

      <p>值：{{ value2 }}</p>
      <d-transfer v-model="value2" :datas="sourceDatas2" :option="option2" keyName="id"></d-transfer>
    </div>
  </div>
</template>

<script>
export default {
  name: 'demo1',
  data () {
    let sourceDatas1 = this.generateDemoData('key')
    let sourceDatas2 = this.generateDemoData('id')
    return {
      value1: null,
      sourceDatas1,
      option1: {
        ltText: '左移',
        rtText: '右移'
      },
      value2: [1, 2],
      option2: {
        rtIcon: 'd-icon-plus',
        ltIcon: 'd-icon-minus'
      },
      sourceDatas2
    }
  },
  methods: {
    generateDemoData (propKey) {
      let data = []
      for (let i = 0; i < 10; i++) {
        data.push({
          [propKey]: i + 1,
          text: `选项${i + 1}`
        })
      }
      return data
    }
  }
}
</script>

<style lang="stylus" scoped>
// .transfer-demo
</style>
